<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		canvas{
			border: 1px solid #000;
			background: url(images/bg.png);
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="500"></canvas>
	<script type="text/javascript">
		//得到标签
		var canvas = document.getElementById("canvas");
		//上下文
		var ctx = canvas.getContext("2d");

		function Tutu(){
			this.x = 100;
			this.y = 100;
			this.w = 560;
			this.h = 300;
			this.ro = 0;
		}
		Tutu.prototype = {
			update : function(){
				this.ro++;
			},
			render : function(){
				//旋转公式：
				ctx.save();
				ctx.translate(this.x + this.w / 2 , this.y + this.h / 2);
				ctx.rotate(Math.PI / 180 * this.ro);
				ctx.translate(-(this.x + this.w / 2) , -(this.y + this.h / 2));

				ctx.drawImage(image,0,0,this.w,this.h,this.x,this.y,this.w,this.h);
				ctx.restore();
			}
		}


		var image = new Image();
		image.src = "images/0.jpg";
		image.onload = function(){
			var tu = new Tutu();

			setInterval(function(){
				ctx.clearRect(0, 0, 800, 500);
				tu.update();
				tu.render();
			},20);
		}
	</script>
</body>
</html>